<template>
  <div class>
    <div class="homecontainer">
      <div class="homecontainer-top">
        <div class="leftdiv">
          <div class="leftone">
            <titleborder title="机柜">
              <leftone />
            </titleborder>
          </div>
          <div class="lefttwo">
            <titleborder title="资源占用">
              <lefttwo />
            </titleborder>
          </div>
        </div>
        <div class="maindiv">
          <normalborder>
            <!-- <lefttwo /> -->
            <mainmap />
          </normalborder>
        </div>
        <div class="rightdiv">
          <!-- <div class="rightone">
            <titleborder title="数据量">
              <rightone />
            </titleborder>
          </div> -->
          <div class="righttwo">
            <titleborder title="告警列表">
              <righttwo />
            </titleborder>
          </div>
        </div>
      </div>
      <div class="homecontainer-bottom">
        <div class="bottomdiv">
          <div class="mainbottomone">
            <titleborder title="湿度">
              <mainbottomone />
            </titleborder>
          </div>
          <div class="mainbottomtwo">
            <titleborder title="温度">
              <mainbottomtwo />
            </titleborder>
          </div>
          <div class="mainbottomthree">
            <titleborder title="模块状态">
              <mainbottomthree />
            </titleborder>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import leftone from "./leftone";
import lefttwo from "./lefttwo";
import mainmap from "./mainmap";
import mainbottomthree from "./mainbottomthree/index.vue";
import mainbottomtwo from "./mainbottomtwo.vue";
import mainbottomone from "./mainbottomone.vue";
import rightone from "./rightone";
import righttwo from "./righttwo/index.vue";

import titleborder from "../title-border.vue";
import normalborder from "../normalborder.vue";

export default {
  components: {
    leftone,
    lefttwo,
    mainmap,
    mainbottomthree,
    mainbottomtwo,
    mainbottomone,
    rightone,
    righttwo,
    titleborder,
    normalborder
  },
  data() {
    return {};
  },
  computed: {},
  watch: {},
  mounted() {},
  methods: {}
};
</script>
<style lang='scss' scoped>
.homecontainer {
  // border: 1px solid #aaa;
  // background-color:#666;
  width: 100%;
  height: calc(100vh - 80px);
  display: flex;
  flex-direction: column;
  .homecontainer-top {
    flex: 10;
    display: flex;
    flex-direction: row;
    .leftdiv {
      flex: 2;
      display: flex;
      flex-direction: column;
      padding: 0px 0px 0px 45px;
      .leftone {
        padding-top: 10px;
        flex: 3;
      }
      .lefttwo {
        padding-top: 10px;
        flex: 6;
      }
    }
    .maindiv {
      flex: 4;
      padding: 20px 10px 0px 10px;
      // padding: 50px;
    }
    .rightdiv {
      flex: 2;
      display: flex;
      flex-direction: column;
      padding: 0px 45px 0px 0px;
      // .rightone {
      //   padding-top: 10px;
      //   flex: 2;
      // }
      .righttwo {
        padding-top: 10px;
        flex: 4;
      }
    }
  }
  .homecontainer-bottom {
    flex: 6;
    display: flex;
    flex-direction: row;
    padding: 10px 45px 10px 45px;
    .bottomdiv {
      display: flex;
      flex-direction: row;
      width: 100%;
      .mainbottomone {
        flex: 2;
      }
      .mainbottomtwo {
        padding-left: 10px;
        flex: 2;

      }
      .mainbottomthree {
        padding-left: 10px;
        flex: 4;
      }
    }
  }
}
</style>